<template>
  <div class="custom-line-popup" v-show="isHovered">
          <!-- <icon-font iconClass="icon-opt-shanchu" style="width: 20px;height: 20px;"  @click.stop="handleDelete" color="#ff0000" fontSize="20px"></icon-font> -->
    <!-- <button class="delete-btn" @click.stop="handleDelete">   sss</button> -->
     <span  @click.stop="handleDelete"><svg t="1750676053741" class="icon" viewBox="0 0 1088 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5454" width="23" height="23" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M513.728 64a448 448 0 1 0 0 896 448 448 0 0 0 0-896z m0 402.56l149.12-149.888 45.312 45.12L558.848 512l149.312 150.208-45.376 45.12L513.728 557.44l-149.12 149.952-45.312-45.12L468.608 512 319.296 361.792l45.376-45.12L513.728 466.56z" fill="#2475FC" fill-opacity=".9" p-id="5455"></path></svg></span>

  </div>
</template>

<script>
export default {
  name: 'CustomLine',
  emits: ['delete'],
  inject: ['getGraphModel', 'getModel'],
  props: {
    properties: {
      type: Object,
      default() {
        return {}
      },
    },
    isSelected: { type: Boolean, default: false },
    isHovered: { type: Boolean, default: false },
  },
  methods: {
    handleDelete() {
      const graphModel = this.getGraphModel()
      const model = this.getModel()
      graphModel.deleteEdgeById(model.id)
      this.$emit('delete')
    },
  },
}
</script>
<style lang="less" scoped>
.custom-line-popup {
  cursor: pointer;
  border-radius: 6px;
  background: #fff;

  .delete-btn {
    // width: 70px;
    // height: 36px;
    line-height: 36px;
    padding: 0;
    border: 0;
    font-size: 14px;
    color: #fb363f;

    text-align: center;
    cursor: pointer;
    background: none;
  }
}
</style>